<template>
	<view class="boxes">
		<loading-view :loading="!pageData" rows="3" :rowsWidth="['50%', '100%']" :rowsHeight="[24, 100]" marginTop="20">
			<view class="Product" v-for="(item, index) in pageData.data" :key="index">
				<view class="Shop">
					<image :src="$imgUrls(item.shopLogo)" mode="aspectFill" class="shopLogo" v-if="item.shopLogo">
					</image>
					<text class="shopName">{{ item.shopName }}</text>
				</view>
				<view class="list" v-for="(V, Vindex) in item.list" :key="Vindex">
					<image :src="$imgUrls(V.img)" mode="aspectFill" class="goods_img"></image>
					<view class="goodsInfo">
						<text class="goods_title ellipsis_2">{{ V.name }}</text>
						<text class="color_99 size28 ellipsis" v-if="V.operation_text">{{ V.operation_text }}</text>
						<view class="color_99 size28" v-if="V.weight > 0">重量：{{ V.weight }}kg</view>
						<view class="goods_Bot">
							<view class="d-flex">
								<view class="Pricesymbol">￥</view>
								<text class="Price">{{ V.goodsOneOldPrice | goodsOneOldPrice }}</text>
							</view>
							<view class="Controls" v-if="goods_id">
								<view class="Controls_icon subtract" @click.stop="handleSub(V)"
									:class="{ prohibit: V.num == 1 }">
									<view class="iconfont icon-jianhao size28"></view>
								</view>
								<view class="Controls_num" @click="editNum(V)">{{ V.num }}</view>
								<view class="Controls_icon add" @click.stop="handleAdd(V)"
									:class="{ prohibit: V.num == V.stock }">
									<view class="iconfont icon-jiahao size28"></view>
								</view>
							</view>
							<text class="size28 color_99" v-else>x{{ V.num }}</text>
						</view>

					</view>
				</view>

				<view class="byJob" v-if="!arg.group_id && !arg.open_group">
					<text class="allNum">共 {{ item.goodsNumber }} 件</text>
					<text class="color_33 size28 m-left10">小计：</text>
					<view class="d-flex">
						<view class="Pricesymbol">￥</view>
						<text class="Price">{{ item.goodsMoney.toFixed(2) }}</text>
					</view>
				</view>

			</view>
		</loading-view>

		<view class="mask flexac" v-if="showNum">
			<view class="viewbox55 padding40 bgwhite bor_radius_30 text-center">
				<view class="size32">修改购买数量</view>
				<view class="margin40 d-flex j-centert">
					<u-number-box v-model="value" integer :max="current.stock" inputWidth="80"
						bgColor="#fff"></u-number-box>
				</view>
				<view class="d-flex j-sb">
					<view class="btn flexac bor_80 bor_radius_30" @click="showNum = false">取消</view>
					<view class="btn flexac thmeBg bor_radius_30 white" @click="confirm">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import LoadingView from './LoadingView.vue'
	export default {
		props: ['pageData', 'goods_id', 'car_id', 'arg'],
		components: {
			LoadingView
		},
		data() {
			return {
				showNum: false,
				current: '',
				value: 0
			}
		},
		methods: {
			editNum(item) {
				this.current = item
				this.value = item.num
				this.showNum = true
			},
			confirm() {
				if (this.value < 1) return this.$Toast('最少购买1件哦！')
				if (this.arg.goods_id) this.$emit('changeData', 3, this.value)
				if (this.arg.car_id) this.incCart(this.current.car_id, this.value)
				this.showNum = false
			},
			handleSub(item) {
				if (item.num == 1) return
				if (this.arg.goods_id) this.$emit('changeData', 1)
				if (this.arg.car_id) this.incCart(item.car_id, +item.num - 1)
			},
			handleAdd(item) {
				if (item.num == item.stock) return
				if (this.arg.goods_id) this.$emit('changeData', 2)
				if (this.arg.car_id) this.incCart(item.car_id, +item.num + 1)
			},
			incCart(car_id, num) {
				this.$http
					.post({
						url: '/zzj_singleSaleApi/incCart',
						data: {
							car_id,
							num
						}
					})
					.then((res) => {
						if (res.errcode != 100) return this.$pop(res.msg)
						this.$emit('getPageData')
					})
			}
		},
		filters: {
			goodsOneOldPrice(Val) {
				let Price = +Val
				return Price.toFixed(2)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.boxes {
		width: 710rpx;
		margin: 0 auto;
	}

	.Product {
		width: 100%;
		padding: 24rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		overflow: hidden;
		margin: 20rpx auto 0;

		.Shop {
			display: flex;
			align-items: center;
			// margin-bottom: 30rpx;

			.shopLogo {
				width: 46rpx;
				height: 46rpx;
				border-radius: 6rpx;
				margin-right: 14rpx;
			}

			.shopName {
				color: #333;
				font-size: 32rpx;
			}
		}

		.list {
			width: 100%;
			display: flex;
			margin-top: 40rpx;

			.goods_img {
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
			}

			.goodsInfo {
				flex: 1;
				height: 200rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.goods_title {
					color: #000;
					font-size: 30rpx;
				}

				.goods_Bot {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.Controls {
						display: flex;
						align-items: center;

						&_icon {
							width: 54rpx;
							height: 50rpx;
							background-color: #f3f3f3;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 28rpx;

							.iconfont {
								color: #323232;
							}
						}

						.prohibit {
							background-color: #f8f8f8 !important;

							.iconfont {
								color: #cccccc;
							}
						}

						.subtract {
							border-radius: 6rpx 0 0 6rpx;
						}

						.add {
							border-radius: 0 6rpx 6rpx 0;
						}

						&_num {
							padding: 0 20rpx;
							min-width: 60rpx;
							height: 50rpx;
							background-color: #f3f3f3;
							margin: 0 4rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 28rpx;
							color: #3a3a3a;
						}
					}
				}
			}
		}

		.byJob {
			width: 100%;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			margin-top: 40rpx;

			.allNum {
				color: #333;
				font-size: 28rpx;
			}
		}
	}

	.Pricesymbol {
		color: var(--color);
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.Price {
		color: var(--color);
		font-size: 36rpx;
	}

	.btn {
		width: 216rpx;
		height: 60rpx;
		font-size: 28rpx;
	}
</style>